<template>
  <h3>登陆界面</h3>

  <hr />
  <LoginVue ref="loginView" />
  <!-- 组件上的 ref 的值为该组件的实例 -->

  <hr />
  <button @click="showSonData">查看子组件中的信息</button>
</template>

<script>
import LoginVue from './组件上的ref--子.vue'

export default {
  components: { LoginVue },
  data: () => ({
    login_vue: null,
  }),
  methods: {
    showSonData() {
      console.log(this.login_vue.account) // 访问子组件中的账号数据
      console.log(this.login_vue.password) // 访问子组件中的密码数据
      this.login_vue.toLogin() // 访问子组件中的去登陆函数
    },
  },
  mounted() {
    this.login_vue = this.$refs.loginView
  },
}
</script>

<script setup>
import { ref } from 'vue'
import LoginVue from './组件上的ref--子.vue'

let loginView = ref(null)

function showSonData() {
  console.log(loginView.value.account) // 访问子组件的 acccount 数据
  console.log(loginView.value.password) // 访问子组件的 password 数据
  loginView.value.toLogin() // 调用子组件的 toLogin 函数
}
</script>
